<!--
 * @Autor: ZN
 * @LastEditors: ZN
 * @Date: 2023-04-27 16:51:27
 * @LastEditTime: 2023-05-11 11:30:44
 * @Description: 首页第二个echarts 图
-->
<template>
  <div class="chart-content">
    <charts :options="option" v-if="isShow"></charts>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import charts from "@/components/common/charts.vue";
import { getRadarCharts } from "@/service/home/home";

const isShow = ref(false);

const option = ref<any>({
  legend: {
    show: false,
  },
  radar: {
    splitArea: {
      areaStyle: {
        color: [
          "rgba(50, 72, 130, 0.7)",
          "rgba(50, 72, 130, 0.5)",
          "rgba(50, 72, 130, 0.6)",
        ],
      },
    },
    axisName: {
      color: "#000",
      fontFamily: "Albbpht",
    },
    splitLine: {
      show: true,
      lineStyle: {
        width: 1,
        color: "rgba(5, 213, 255, .8)", // 设置网格的颜色
      },
    },
    axisLine: {
      lineStyle: {
        color: "rgba(5, 213, 255, .8)",
      },
    },
    polar: {
      center: ["50%", "50%"], // 默认全局居中
      radius: "0%",
    },
    indicator: [],
  },
  series: [
    {
      type: "radar",
      itemStyle: {
        normal: {
          color: "#05D5FF",
        },
      },
      areaStyle: {
        normal: {
          color: "#05D5FF",
          opacity: 0.5,
        },
      },
      lineStyle: {
        width: 2,
        color: "#05D5FF",
      },
      label: {
        show: false,
        color: "#fff",
      },
      data: [
        {
          value: [],
        },
      ],
    },
  ],
});

// 请求数据
const getData = async () => {
  isShow.value = false;
  let result = await getRadarCharts();
  option.value.series[0].data[0].value = result.data.data.map(
    (item) => item.value
  );
  option.value.radar.indicator = result.data.data.map((item) => {
    return {
      name: item.name,
      max: 100,
    };
  });

  isShow.value = true;
};
getData();
</script>

<style scoped lang="scss">
.chart-content {
  width: 100%;
  height: 100%;
}
</style>
